<template>
  <div class="index-slider-class">
    <el-menu
      :default-active="pathActive"
      class="el-menu-vertical-demo"
      router
      unique-opened
      @open="handleOpen"
      @close="handleClose"
      background-color="#fff"
      text-color="#4e5969"
      active-text-color="#009878"
    >
      <div class="logo_box">
        <img @click="goPage" src="../../assets/images/logo.jpg" alt="" class="logo" />
      </div>
      <div v-for="item in $store.state.menuList" :key="item.id">
        <el-submenu v-if="item.sub && item.sub.length > 0" :index="item.id">
          <template slot="title">
            <i class="iconfont" :class="item.menuIcon" :style="{color: menuActive(item)}"></i>
            <span v-text="item.name" :style="{color: menuActive(item)}"></span>
          </template>
          <el-menu-item-group v-for="sub in item.sub" :key="sub.id">
            <el-menu-item
              :index="'/' + sub.pathName"
              v-if="!sub.hidden"
            >
              <div>
                <span slot="title">{{ sub.name }}</span>
              </div>
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-menu-item v-else-if="!item.sub" :index="'/' + item.pathName">
          <div>
            <i class="iconfont" :class="item.menuIcon" :style="{color: menuActive(item)}"></i>
            <span slot="title">{{ item.name }}</span>
          </div>
          <!--            <i class="iconfont arrow-bottom">&#xe605;</i>-->
        </el-menu-item>
      </div>
    </el-menu>
  </div>
</template>

<script>
import menuList from "@/router/menuConfig";

export default {
  name: "IndexSlider",
  data() {
    return {
      menuList
    };
  },
  created(){
    let path = this.$route.name;
    console.log(path)
    // let path = this.$route.name.substring(1);
    let name = path.replace(/^(add|edit|del|up|task|all\d+)/i, "");
    console.log(name, path)
    return "/" + name.replace(name[0], name[0].toLowerCase());
  },
  mounted() {
  },
  computed: {
    pathActive() {
      let path = this.$route.name;
      console.log(path)
      // let path = this.$route.name.substring(1);
      let name = path.replace(/^(add|editCost|edit|del|up|task|all\d+)/i, "");
      console.log(name, path)
      return "/" + name.replace(name[0], name[0].toLowerCase());
    }
  },
  methods: {
    menuActive(tab) {
      if (tab.hasOwnProperty('sub') && tab.sub.length > 0) {
        return this.$route.path === `/${tab.pathName}` || tab.sub.map(i => `/${i.pathName}`).includes(this.$route.path) ? this.$store.state.theme.theme_color : '#4e5969'
      } else {
        return this.$route.path === `/${tab.pathName}` ? this.$store.state.theme.theme_color : '#4e5969'
      }
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    goPage() {
      this.$router.push({
        path: "/dashboard"
      });
    }
  }
};
</script>
<style>
/* .iconfont {
  color: #4e5969 !important;
} */
</style>
<style lang="sass">
.index-slider-class
  .el-submenu__title
    font-size: 14px
    font-weight: bold
  .is-active
    background: linear-gradient(45deg, #f1f4f4 0%, #f1f4f4 100%) //激活项背景颜色
    box-shadow: 0px 8px 6px 0px rgba(25, 48, 255, 0.2)
    color: #0b57d0 !important //激活项文字颜色
    border-radius: 4px
  .el-menu-vertical-demo
    >div
      >.el-menu-item
        font-size: 14px
        font-weight: bold
  .el-menu-item
    font-size: 14px
    font-weight: 300
</style>
<style lang="sass" scoped>
.index-slider-class
  position: fixed
  top: 0
  left: 0
  bottom: 0
  width: 180px
  background: #fff // 侧边栏盒子背景色
  z-index: 100
  overflow: auto
  .logo_box
    width: 180px
    height: 90px
    padding: 10px 
    background: #fff
    box-sizing: border-box
    .logo
      width: 100%
      //height: 50px
      cursor: pointer
      //margin-left: 7px
      margin-bottom: 67px
  .el-menu-item
    height: 56px!important
    line-height: 56px!important
  ::v-deep .el-menu-item-group__title
    padding: 0px 0 0px 20px
  .el-menu
    border-right: 0
    overflow: hidden
    .el-submenu__title, .el-menu-item
      i
        font-size: 16px
        color: #fff
        margin-right: 10px
    .el-menu-item.is-active
      //i
      //  color: $main-color
    .el-submenu
      .el-menu-item.is-active
        //position: relative
        //&::before
        //  content: ""
        //  position: absolute
        //  left: 24px
        //  top: 50%
        //  margin-top: -7px
        //  width: 3px
        //  height: 14px
        //  background: #3297FF
</style>
